<!--
 * @Description: 
 * @Author: chenju
 * @Date: 2022-03-22 17:08:41
 * @LastEditors: qingyang
 * @LastEditTime: 2023-07-18 15:47:57
-->
<template>
  <CDialog
    :title="title"
    append-to-body
    destroy-on-close
    size="small"
    :close-on-click-modal="false"
    v-model:visible="dialogVisible"
    @confirm="handleConfirm"
    @cancel="dialogVisible = false"
    :loading="loading"
  >
    <div class="edit-op-container main g-flex" v-if="dialogVisible">
      <el-form ref="formRef" class="lf" :model="taskForm" :rules="obj.rules" label-position="top">
        <el-row>
          <el-col :span="24">
            <el-form-item label="类型" prop="type" style="width: 280px">
              <el-select v-model="taskForm.type" clearable style="width: 100%" placeholder="请选择">
                <el-option
                  v-for="item in emissionTypeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="名称" prop="name">
              <el-input v-model="taskForm.name" maxlength="50" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="描述" prop="description">
              <el-input
                v-model="taskForm.description"
                maxlength="255"
                show-word-limit
                resize="none"
                type="textarea"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </CDialog>
</template>
<script lang="ts">
export default {
  name: 'AddOrEditTaskDialog'
};
</script>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed, ref, watch, reactive } from 'vue';
import { CDialog } from '@/components/CDialog';
import { useMessage } from '@/hooks/useMessage';
import * as obj from './rules';
import { emissionTypeOption } from '@/constants/enum';

import { createEmission, editEmission } from '@/apis/system/config/emissionList';
interface SelectFillTypeDialogProps {
  visible: boolean;
  info: undefined | any;
}
const props = withDefaults(defineProps<SelectFillTypeDialogProps>(), {});
const emit = defineEmits(['update:visible', 'refresh']);
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
const title = computed(() => {
  if (props.info) {
    return '编辑排放源设施';
  } else {
    return '新增排放源设施';
  }
});
watch(
  () => dialogVisible.value,
  visible => {
    if (visible) {
      loadData();
      init();
    } else {
      formRef.value?.resetFields();
    }
  }
);
const loadData = () => {
  if (props.info) {
    taskForm.type = props.info.type;
    taskForm.name = props.info.name;
    taskForm.description = props.info.description;
  }
};
const loading = ref(false);
const { createMessage } = useMessage();
let taskForm = reactive({
  type: '',
  name: '',
  description: ''
});

const formRef = ref();

function handleConfirm() {
  formRef.value?.validate(async (valid: boolean) => {
    console.log(taskForm);
    console.log(valid);

    if (valid) {
      loading.value = true;
      try {
        if (props.info) {
          await editEmission({ ...taskForm, sourceNo: props.info.sourceNo });
        } else {
          await createEmission(taskForm);
        }
        createMessage.success(props.info ? '编辑成功! ' : '新增成功! ');
        dialogVisible.value = false;
        init();
        emit('refresh');
      } finally {
        loading.value = false;
      }
    }
  });
}
function init() {
  loading.value = false;
  formRef.value?.resetFields();
}
</script>
<style lang="scss" scoped></style>
